<template>
  <div>
    <div class="header">
      <div class="same">
        <div class="hed">
          <div class="i">
            <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
            <i class="iconfont icon-home" @click="$router.replace('/')"></i>
          </div>
          <p>商品详情</p>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="swipersame">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in detail.detail_banner"
              :key="index"
            >
              <img
                :src="`http://192.168.10.23:8888/` + item.bannerUrl"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <div class="same">
        <div class="title">
          <div class="banxin">
            <div class="price">
              <dl>
                <dt>￥{{ detail.detailPrice }}</dt>
                <dd>
                  市场价 <del>￥{{ detail.detailSell }}</del>
                </dd>
              </dl>
              <span>销量:{{ detail.detailStock }}</span>
            </div>
            <p>{{ detail.detailName }}</p>
          </div>
        </div>
        <div class="choose">
          <div class="banxin">
            <!-- <div class="coupon">
              <span>领券</span>
              <p>
                <span>满150.00减30元</span>
                <span>满99.00减10元</span>
              </p>
            </div> -->
            <div class="service">
              <span>送至</span>
              <dl>
                <dt>广东省</dt>
              </dl>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="Specification">
              <span>选择</span>
              <dl>
                <dt>规格:85g</dt>
              </dl>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div class="evaluation">
          <div class="banxin">
            <div class="til">
              <p>
                评价<span>{{ detail.detail_reply.length }}</span>
              </p>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="user_reply" v-if="!detail.detail_reply.length">
              <van-empty image="error" description="暂无评价" />
            </div>
            <div class="user_reply" v-else>
              <div
                class="user"
                v-for="item in detail.detail_reply"
                :key="item.id"
              >
                <div class="userInfo">
                  <img :src="item.user_url" alt="" />
                  <dl>
                    <dt>{{ item.user_name }}</dt>
                    <el-rate v-model="item.value" disabled :colors="colors">
                    </el-rate>
                  </dl>
                </div>
                <div class="content">
                  <p>{{ item.content }}</p>
                  <dl>
                    <dd>{{ item.til }}</dd>
                    <dd>{{ item.type }}</dd>
                  </dl>
                </div>
              </div>

              <div class="reply_all">
                <button>查看全部评论</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="same">
        <div class="footer-btn">
          <span>
            <i class="iconfont icon-gouwuchekong"></i>
            购物车
          </span>
          <span>
            <i class="iconfont icon-kefu"></i>
            客服
          </span>
          <span>
            <i class="iconfont icon-shoucang"></i>
            收藏
          </span>
        </div>
        <div class="btn">
          <button
            class="gowu"
            @click="
              onSubmit(
                detail.detailId,
                detail.detailName,
                detail.detailPrice,
                detail.detail_banner[0].bannerUrl
              )
            "
          >
            加入购物车
          </button>
          <button
            class="liji"
            @click="
              onSubmit(
                detail.detailId,
                detail.detailName,
                detail.detailPrice,
                detail.detail_banner[0].bannerUrl
              )
            "
          >
            立即购买
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import Swiper from "swiper";
import "../../../node_modules/swiper/css/swiper.css";
import { shopdetail, AddShop } from "@/api/index";
export default {
  components: {},
  data() {
    return {
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      detail: {
        detail_reply: [],
      },
    };
  },
  mounted() {},
  created() {
    this.shopdetail();
  },
  methods: {
    onSubmit(detailId, listName, listPrice, listUrl) {
      let usersId = this.$store.state.user.id;
      let shoppingCart = [
        {
          detailId: detailId,
          listName: listName,
          listPrice: listPrice,
          listUrl: listUrl,
          usersId: usersId,
        },
      ];
      // console.log(detailId, listName, listPrice, listUrl, usersId);
      // console.log(shoppingCart);

      AddShop(shoppingCart).then((res) => {
        // console.log(res);
        this.$router.push("/ShopCart");
        Toast("添加成功");
      });
    },
    shopdetail() {
      let id = this.$route.params.id;
      shopdetail(id).then((res) => {
        this.detail = res.data.data;
        // console.log(this.detail);
        setTimeout(() => {
          new Swiper(".mySwiper", {
            autoplay: true,
            loop: true,
          });
        }, 1000);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 8vh;

  background: transparent;
  z-index: 5;
  top: 0;
  position: fixed;
  background: rgb(255, 255, 255);

  .hed {
    width: 100%;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    .i {
      display: flex;
      align-items: center;
      i {
        margin: 0 2vw;
      }
      .icon-home {
        font-size: 22px;
      }
    }
    p {
      width: 58vw;
    }
  }
}
.main {
  width: 100%;
  height: auto;
  background: #f7f7f7;

  overflow: hidden;
  margin-bottom: 10vh;
  .swipersame {
    width: 100%;
    height: auto;
    .mySwiper {
      img {
        width: 100%;
      }
    }
  }
  .evaluation {
    width: 100%;
    height: 50vh;
    margin-top: 2vh;
    background: rgb(255, 255, 255);
    font-size: 14px;
    border-radius: 10px;
    .banxin {
      width: 95%;
      margin: 0 auto;
      .til {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 5vh;
        span {
          font-size: 12px;
          margin-left: 5px;
        }
      }
      .user_reply {
        width: 100%;
        height: auto;
        .reply_all {
          width: 100%;
          height: 5vh;
          // background: red;
          display: flex;
          align-items: center;
          justify-content: center;
          button {
            border-radius: 10px;
            padding: 2px 10px;
            font-size: 12px;
            border: 1px solid #ccc;
          }
        }
        .user {
          width: 100%;
          height: 15vh;
          margin-bottom: 2vh;
          .userInfo {
            height: 8vh;
            // background: red;

            display: flex;
            align-items: center;
            justify-content: space-around;
            dl {
              width: 70vw;
            }
            img {
              height: 7vh;
              border-radius: 50%;
            }
          }
          .content {
            height: 7vh;
            // background: red;
            color: #333;
            p {
              margin-left: 10px;
              font-size: 16px;
            }

            dl {
              margin-left: 10px;
              width: 70vw;
              display: flex;
              font-size: 13px;
              color: #ccc;
            }
          }
        }
      }
    }
  }
  .choose {
    width: 100%;
    height: auto;
    margin-top: 2vh;
    background: rgb(255, 255, 255);
    border-radius: 10px;
    color: #aaa;
    font-size: 14px;
    .banxin {
      width: 95%;
      margin: 0 auto;
      .coupon {
        width: 100%;
        height: 8vh;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          width: 78vw;
          display: flex;
          // background: red;
          span {
            display: block;
            padding: 2px 10px;
            background: red;
            margin-right: 3vw;
            font-size: 12px;
            color: rgb(247, 25, 25);
            background: rgb(247, 201, 209);
          }
        }
        //   background: rgb(8, 73, 186);
      }
      .service {
        width: 100%;
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // background: red;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        dl {
          width: 70vw;
          dt {
            color: #333;
            font-size: 16px;
          }
        }
      }
      .Specification {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 10vh;
        //   background: rgb(255, 145, 0);

        dl {
          width: 70vw;
          dt {
            color: #333;
            font-size: 16px;
          }
        }
      }
    }
  }
  .title {
    width: 100%;
    height: 20vh;
    margin-top: 2vh;

    background: rgb(255, 255, 255);
    border-radius: 10px;
    font-size: 16px;
    text-align: left;
    .banxin {
      width: 95%;
      margin: 0 auto;
      .price {
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // background: red;
        font-size: 12px;
        color: #ccc;
        dt {
          font-size: 28px;
          color: rgb(243, 124, 124);
        }
      }
      p {
        height: 10vh;
        display: flex;
        align-items: center;
      }
    }
  }
}
.footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 10vh;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  .same {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .footer-btn {
      width: 40vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      i {
        font-size: 28px;
        display: block;
        text-align: center;
      }
    }
    .btn {
      // background: red;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 52vw;

      button {
        width: 30vw;
        height: 6vh;
        border: 0;
        color: #fff;
        background: chocolate;
        padding: 8px;
      }
      .gowu {
        border-radius: 18px 0 0 18px;
        background: rgb(255, 115, 0);
      }
      .liji {
        border-radius: 0 18px 18px 0;
        background: rgb(236, 166, 36);
      }
    }
  }
}
</style>
